<template>
  <el-card class="home__card-item">
    <div slot="header" class="home__card-title clearfix">
      <h3>业务概览（整体）</h3>
      <!-- <ul class="home__card-menu">
        <li>昨日</li>
        <li>今日</li>
        <li>本周</li>
        <li>本月</li>
      </ul>
      <el-date-picker type="date" size="mini" placeholder="选择日期" /> -->
      <el-date-picker
        class="home__card-menu"
        v-model="createTime"
        type="datetimerange"
        size="mini"
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
        align="right">
      </el-date-picker>
    </div>
    <ul class="home__overviewall">
      <li
        v-for="(item, index) in list"
        :key="index"
        class="home__overviewall__item">
        <div
          class="home__overviewall--inner"
          @click="jumpTargetPage(item)"    v-loading="loading">
            <icon :name="item.icon" />
          <div class="home__overviewall__content">
            <h4>{{ item.dataText }}</h4>
            <div>
              {{ item.dataValue }}
            </div>
          </div>
        </div>
      </li>
    </ul>
  </el-card>
</template>

<script>
import { businessReportAll } from '@/api/report/report'

export default {
  name: 'OverviewAll',
  components: {},
  data() {
    return {
      loading: false,
      list: [],
      createTime: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '昨日',
            onClick(picker) {
              const end = new Date(new Date().setHours(0, 0, 0, 0))
              const start = new Date(new Date().setHours(0, 0, 0, 0))
              start.setTime(start.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '今日',
            onClick(picker) {
              const end = new Date()
              const start = new Date(new Date().setHours(0, 0, 0, 0))
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date(new Date().setHours(0, 0, 0, 0))
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date(new Date().setHours(0, 0, 0, 0))
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date(new Date().setHours(0, 0, 0, 0))
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  watch: {
    createTime() {
      console.log(this.createTime)
      this.getList()
    }
  },
  methods: {
    /** 查询列表 */
    getList() {
      // 处理查询参数
      this.loading = true
      // 处理查询参数
      var queryParams = {
        createTime: this.createTime
      }
      console.log(queryParams)
      businessReportAll(queryParams).then((response) => {
        this.list = response.data.list
          this.loading = false
      })
    },
    jumpTargetPage(item) {
      if (item.componentName) {
        this.$router.push({
          name: item.componentName
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
ul,
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  padding: 0;
}

.home__overviewall {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;

  &__icon {
    font-size: 36px;
    color: #3456dd;
  }

  &__item {
    width: 20%;
    padding: 4px;
    box-sizing: border-box;
  }

  &--inner {
    display: flex;
    align-items: center;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    &:nth-child(5n) {
      margin-left: 0%;
    }
  }

  &__content {
    margin-left: 8px;
    & > h4 {
      margin: 0 0 6px;
      color: #999;
    }
  }
}
</style>
